<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->  
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->  
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->  
<head>
    <title>云起CRU | 单页面样例</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Favicon -->
    <link rel="shortcut icon" href="favicon.ico">

    <!-- Web Fonts -->
    <link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600&amp;subset=cyrillic,latin'>

    <!-- CSS Global Compulsory -->
    <link rel="stylesheet" href="__UNIFYONE__/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="__UNIFYONE__/css/one.style.css">

    <!-- CSS Footer -->
    <link rel="stylesheet" href="__UNIFYONE__/css/footers/footer-v7.css">

    <!-- CSS Implementing Plugins -->
    <link rel="stylesheet" href="__UNIFYONE__/plugins/animate.css">    
    <link rel="stylesheet" href="__UNIFYONE__/plugins/line-icons/line-icons.css">
    <link rel="stylesheet" href="__UNIFYONE__/plugins/font-awesome/css/font-awesome.min.css">    
    <link rel="stylesheet" href="__UNIFYONE__/plugins/pace/pace-flash.css">
    <link rel="stylesheet" href="__UNIFYONE__/plugins/owl-carousel/owl.carousel.css">    
    <link rel="stylesheet" href="__UNIFYONE__/plugins/cube-portfolio/cubeportfolio/css/cubeportfolio.min.css">    
    <link rel="stylesheet" href="__UNIFYONE__/plugins/cube-portfolio/cubeportfolio/custom/custom-cubeportfolio.css">    
    <link rel="stylesheet" href="__UNIFYONE__/plugins/revolution-slider/rs-plugin/css/settings.css" type="text/css" media="screen">
    <!--[if lt IE 9]><link rel="stylesheet" href="__UNIFYONE__/plugins/revolution-slider/rs-plugin/css/settings-ie8.css" type="text/css" media="screen"><![endif]-->

    <!-- Style Switcher -->
    <link rel="stylesheet" href="__UNIFYONE__/css/plugins/style-switcher.css">
    
    <!-- CSS Theme -->    
    <link rel="stylesheet" href="__UNIFYONE__/css/theme-colors/default.css" id="style_color">
    <link rel="stylesheet" href="__UNIFYONE__/css/theme-skins/one.dark.css">

    <!-- CSS Customization -->
    <link rel="stylesheet" href="__UNIFYONE__/css/custom.css">
</head>

<!-- 
The #page-top ID is part of the scrolling feature.
The data-spy and data-target are part of the built-in Bootstrap scrollspy function.
-->
<body id="body" data-spy="scroll" class="demo-lightbox-gallery">
	<!--=== 样式转换 ===-->    
	<i class="style-switcher-btn fa fa-cogs hidden-xs"></i>
	<div class="style-switcher animated fadeInRight">
	    <div class="style-swticher-header">
	        <div class="style-switcher-heading">样式转换</div>            
	        <div class="theme-close"><i class="icon-close"></i></div>
	    </div>
	    <div class="style-swticher-body">
	        <!-- Theme Skins -->
	        <div class="style-switcher-heading">主题皮肤</div>
	        <div class="row no-col-space margin-bottom-20 skins-section">
	            <div class="col-xs-6">
	                <button data-skins="default" class="btn-u btn-u-xs btn-u-dark btn-block active-switcher-btn handle-skins-btn">浅色</button>
	            </div>
	            <div class="col-xs-6">
	                <button data-skins="dark" class="btn-u btn-u-xs btn-u-dark btn-block skins-btn">深色</button>
	            </div>
	        </div>            
	        <hr>
	        <!-- Layout Styles -->
	        <div class="style-switcher-heading">布局样式</div>
	        <div class="row no-col-space margin-bottom-20">
	            <div class="col-xs-6">
	                <a href="javascript:void(0);" class="btn-u btn-u-xs btn-u-dark btn-block active-switcher-btn wide-layout-btn">宽屏</a>                
	            </div>
	            <div class="col-xs-6">
	                <a href="javascript:void(0);" class="btn-u btn-u-xs btn-u-dark btn-block boxed-layout-btn">窄屏</a>                
	            </div>
	        </div>            
	    </div>
	</div><!--/style-switcher--> 

    <!--=== Header ===-->    
    <nav class="one-page-header navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="menu-container page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                
                <a class="navbar-brand" href="#intro">
                    <span>CRU</span>云起
                    <!-- <img src="__UNIFYONE__/img/logo1.png" alt="Logo"> -->
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <div class="menu-container">
                    <ul class="nav navbar-nav">
                        <li class="page-scroll home">
                            <a href="#body">首页</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#about">关于</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#services">服务</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#news">动态</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#portfolio">团队</a>
                        </li>
                        <li class="page-scroll">
                            <a href="#contact">联系</a>
                        </li>                    
                        <li class="page-scroll">
                            <a href="{:U('Index/index')}">网站主页</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>
    <!--=== End Header ===-->    

    <!-- Intro Section -->
    <section id="intro" class="intro-section">
        <div class="fullscreenbanner-container">
            <div class="fullscreenbanner">
                <ul>
                    <!-- SLIDE 1 -->
                    <li data-transition="curtain-1" data-slotamount="5" data-masterspeed="700" data-title="Slide 1">
                        <!-- MAIN IMAGE -->
                        <img src="__UNIFYONE__/img/sliders/revolution/bg1.jpg" alt="slidebg1" data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

                        <!-- LAYERS -->
                        <div class="tp-caption rs-caption-1 sft start"
                            data-x="center"
                            data-hoffset="0"
                            data-y="100"
                            data-speed="800"
                            data-start="2000"
                            data-easing="Back.easeInOut"
                            data-endspeed="300">
                            WE ARE CRU云起 CREATIVE TECHNOLOGY COMPANY
                        </div>

                        <!-- LAYER -->
                        <div class="tp-caption rs-caption-2 sft"
                            data-x="center"
                            data-hoffset="0"
                            data-y="200"
                            data-speed="1000"
                            data-start="3000"
                            data-easing="Power4.easeOut"
                            data-endspeed="300"
                            data-endeasing="Power1.easeIn"
                            data-captionhidden="off"
                            style="z-index: 6">
                            Creative freedom matters user experience.<br>
                            We minimize the gap between technology and its audience.
                        </div>

                        <!-- LAYER -->
                        <div class="tp-caption rs-caption-3 sft"
                            data-x="center"
                            data-hoffset="0"
                            data-y="360"
                            data-speed="800"
                            data-start="3500"
                            data-easing="Power4.easeOut"
                            data-endspeed="300"
                            data-endeasing="Power1.easeIn"
                            data-captionhidden="off"
                            style="z-index: 6">
                            <span class="page-scroll"><a href="#about" class="btn-u btn-brd btn-brd-hover btn-u-light">Learn More</a></span>
                            <span class="page-scroll"><a href="#portfolio" class="btn-u btn-brd btn-brd-hover btn-u-light">Our Work</a></span>
                        </div>
                    </li>

                    <!-- SLIDE 2 -->
                    <li data-transition="slideup" data-slotamount="5" data-masterspeed="1000" data-title="Slide 2">
                        <!-- MAIN IMAGE -->
                        <img src="__UNIFYONE__/img/sliders/revolution/bg2.jpg" alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

                        <!-- LAYERS -->
                        <div class="tp-caption rs-caption-1 sft start"
                            data-x="center"
                            data-hoffset="0"
                            data-y="100"
                            data-speed="800"
                            data-start="1500"
                            data-easing="Back.easeInOut"
                            data-endspeed="300">
                            DEDICATED ADVANCED TEAM
                        </div>

                        <!-- LAYER -->
                        <div class="tp-caption rs-caption-2 sft"
                            data-x="center"
                            data-hoffset="0"
                            data-y="200"
                            data-speed="1000"
                            data-start="2500"
                            data-easing="Power4.easeOut"
                            data-endspeed="300"
                            data-endeasing="Power1.easeIn"
                            data-captionhidden="off"
                            style="z-index: 6">
                            We are creative technology company providing<br> 
                            key digital services on web and mobile.                            
                        </div>

                        <!-- LAYER -->
                        <div class="tp-caption rs-caption-3 sft"
                            data-x="center"
                            data-hoffset="0"
                            data-y="360"
                            data-speed="800"
                            data-start="3500"
                            data-easing="Power4.easeOut"
                            data-endspeed="300"
                            data-endeasing="Power1.easeIn"
                            data-captionhidden="off"
                            style="z-index: 6">
                            <span class="page-scroll"><a href="#about" class="btn-u btn-brd btn-brd-hover btn-u-light">Learn More</a></span>
                            <span class="page-scroll"><a href="#portfolio" class="btn-u btn-brd btn-brd-hover btn-u-light">Our Work</a></span>
                        </div>
                    </li>

                    <!-- SLIDE 3 -->
                    <li data-transition="slideup" data-slotamount="5" data-masterspeed="700"  data-title="Slide 3">
                        <!-- MAIN IMAGE -->
                        <img src="__UNIFYONE__/img/sliders/revolution/bg3.jpg"  alt="slidebg1"  data-bgfit="cover" data-bgposition="center center" data-bgrepeat="no-repeat">

                        <!-- LAYERS -->
                        <div class="tp-caption rs-caption-1 sft start"
                            data-x="center"
                            data-hoffset="0"
                            data-y="110"
                            data-speed="800"
                            data-start="1500"
                            data-easing="Back.easeInOut"
                            data-endspeed="300">
                            WE DO THINGS DIFFERENTLY
                        </div>

                        <!-- LAYER -->
                        <div class="tp-caption rs-caption-2 sfb"
                            data-x="center"
                            data-hoffset="0"
                            data-y="210"
                            data-speed="800"
                            data-start="2500"
                            data-easing="Power4.easeOut"
                            data-endspeed="300"
                            data-endeasing="Power1.easeIn"
                            data-captionhidden="off"
                            style="z-index: 6">
                            Creative freedom matters user experience.<br>
                            We minimize the gap between technology and its audience.
                        </div>

                        <!-- LAYER -->
                        <div class="tp-caption rs-caption-3 sfb"
                            data-x="center"
                            data-hoffset="0"
                            data-y="370"
                            data-speed="800"
                            data-start="3500"
                            data-easing="Power4.easeOut"
                            data-endspeed="300"
                            data-endeasing="Power1.easeIn"
                            data-captionhidden="off"
                            style="z-index: 6">
                            <span class="page-scroll"><a href="#about" class="btn-u btn-brd btn-brd-hover btn-u-light">Learn More</a></span>
                            <span class="page-scroll"><a href="#portfolio" class="btn-u btn-brd btn-brd-hover btn-u-light">Our Work</a></span>
                        </div>
                    </li>                    
                </ul>
                <div class="tp-bannertimer tp-bottom"></div>
                <div class="tp-dottedoverlay twoxtwo"></div>
            </div>
        </div>
    </section>
    <!-- End Intro Section -->

    <!--  About Section -->
    <section id="about" class="about-section section-first">
        <div class="block-v1">
            <div class="container">
                <div class="row content-boxes-v3">
                    <div class="col-md-4 md-margin-bottom-30">
                        <i class="icon-custom rounded-x icon-bg-dark fa fa-lightbulb-o"></i>
                        <div class="content-boxes-in-v3">
                            <h2 class="heading-sm">Creative Desgin</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                        </div>
                    </div>
                    <div class="col-md-4 md-margin-bottom-30">
                        <i class="icon-custom rounded-x icon-bg-dark fa fa-flask"></i>
                        <div class="content-boxes-in-v3">
                            <h2 class="heading-sm">Web Development</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <i class="icon-custom rounded-x icon-bg-dark fa fa-bolt"></i>
                        <div class="content-boxes-in-v3">
                            <h2 class="heading-sm">Online Marketing</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                        </div>
                    </div>
                </div>                
            </div>
        </div>

        <div class="about-image bg-grey">
            <div class="container">
                <div class="title-v1">
                    <h1>We are CRU云起 Agency</h1>
                    <p>CRU云起 <strong>creative</strong> technology company providing key digital services. <br> 
                    Focused on helping our clients to build a <strong>successful</strong> business on web and mobile.</p>                
                </div>
                <div class="img-center">
                    <img class="img-responsive" src="__UNIFYONE__/img/mockup/mockup.png" alt="">
                </div>
            </div>
        </div>        

        <div class="container content-lg">
            <div class="title-v1">
                <h2>Our Vision And Mission</h2>
                <p>We <strong>meet</strong> and get to know you. You tell us and we listen. <br> 
                We build your website to realise your vision and we <strong>deliver</strong> the ready product.</p>
            </div>

            <div class="row">
                <div class="col-md-6 content-boxes-v3 margin-bottom-40">
                    <div class="clearfix margin-bottom-30">
                        <i class="icon-custom icon-md rounded-x icon-bg-u icon-line icon-trophy"></i>
                        <div class="content-boxes-in-v3">
                            <h2 class="heading-sm">Innovation Leader</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                        </div>
                    </div>
                    <div class="clearfix margin-bottom-30">
                        <i class="icon-custom icon-md rounded-x icon-bg-u icon-line icon-directions"></i>
                        <div class="content-boxes-in-v3">
                            <h2 class="heading-sm">Best Solutions &amp; Approaches</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                        </div>
                    </div>
                    <div class="clearfix margin-bottom-30">
                        <i class="icon-custom icon-md rounded-x icon-bg-u icon-line icon-diamond"></i>
                        <div class="content-boxes-in-v3">
                            <h2 class="heading-sm">Quality Service &amp; Support</h2>
                            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's</p>
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <img class="img-responsive" src="__UNIFYONE__/img/mockup/mockup1.png" alt="">
                </div>
            </div>
        </div>        

        <div class="parallax-quote parallaxBg">
            <div class="container">
                <div class="parallax-quote-in">
                    <p>If you can design one thing <span class="color-green">you can design</span> everything. <br> Just Believe It.</p>
                    <small>- HtmlStream -</small>
                </div>
            </div>
        </div>        

        <div class="team-v1 bg-grey content-lg">
            <div class="container">
                <div class="title-v1">
                    <h2>Meet Our Team</h2>
                    <p>We <strong>meet</strong> and get to know you. You tell us and we listen. <br> 
                    We build your website to realise your vision and we <strong>deliver</strong> the ready product.</p>
                </div>

                <ul class="list-unstyled row">
                    <li class="col-sm-3 col-xs-6 md-margin-bottom-30">
                        <div class="team-img">
                            <img class="img-responsive" src="__UNIFYONE__/img/team/img1-md.jpg" alt="">
                            <ul>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-google-plus"></i></a></li>
                            </ul>
                        </div>
                        <h3>John Brown</h3>
                        <h4>/ Technical Director</h4>
                        <p>Technical Director mi porta gravida at eget metus id elit mi egetine...</p>
                    </li>
                    <li class="col-sm-3 col-xs-6 md-margin-bottom-30">
                        <div class="team-img">
                            <img class="img-responsive" src="__UNIFYONE__/img/team/img2-md.jpg" alt="">
                            <ul>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-google-plus"></i></a></li>
                            </ul>
                        </div>
                        <h3>Tina Krueger</h3>
                        <h4>/ Lead Designer</h4>
                        <p>Lead Designer mi porta gravida at eget metus id elit mi egetine...</p>
                    </li>
                    <li class="col-sm-3 col-xs-6">
                        <div class="team-img">
                            <img class="img-responsive" src="__UNIFYONE__/img/team/img3-md.jpg" alt="">
                            <ul>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-google-plus"></i></a></li>
                            </ul>
                        </div>
                        <h3>David Case</h3>
                        <h4>/ Web Developer</h4>
                        <p>Web Developer in CRU云起 agency porta gravida at eget metus id elit...</p>
                    </li>
                    <li class="col-sm-3 col-xs-6">
                        <div class="team-img">
                            <img class="img-responsive" src="__UNIFYONE__/img/team/img5-md.jpg" alt="">
                            <ul>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-twitter"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-facebook"></i></a></li>
                                <li><a href="#"><i class="icon-custom icon-sm rounded-x fa fa-google-plus"></i></a></li>
                            </ul>
                        </div>
                        <h3>Kathy Reyes</h3>
                        <h4>/ Creative Designer</h4>
                        <p>Former Designer in Twitter non mi porta gravida at elit mi egetine...</p>
                    </li>
                </ul>                
            </div>
        </div>

        <div class="parallax-counter parallaxBg">
            <div class="container">
                <div class="row">
                    <div class="col-sm-3 col-xs-6">
                        <div class="counters">
                            <span class="counter">10629</span>   
                            <h4>Users</h4>
                        </div>    
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <div class="counters">
                            <span class="counter">277</span> 
                            <h4>Projects</h4>
                        </div>    
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <div class="counters">
                            <span class="counter">78</span>
                            <h4>Team Members</h4>
                        </div>    
                    </div>
                    <div class="col-sm-3 col-xs-6">
                        <div class="counters">
                            <span class="counter">109</span>
                            <h4>Awards</h4>
                        </div>    
                    </div>
                </div>            
            </div>
        </div>        
    </section>
    <!--  About Section -->

    <!-- Services Section -->
    <section id="services">
        <div class="container content-lg">
            <div class="title-v1">
                <h2>Our Services</h2>
                <p>We do <strong>things</strong> differently company providing key digital services. <br> 
                Focused on helping our clients to build a <strong>successful</strong> business on web and mobile.</p>                
            </div>            
    
            <div class="row service-box-v1">
                <div class="col-md-4 col-sm-6">
                    <div class="service-block service-block-default">
                        <i class="icon-custom icon-lg icon-bg-u rounded-x fa fa-lightbulb-o"></i>
                        <h2 class="heading-md">Web Design &amp; Development</h2>
                        <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus</p>
                        <ul class="list-unstyled">
                            <li>Logo &amp; Brand Design</li>
                            <li>Mobile Development</li>
                            <li>E-commerce</li>
                            <li>App &amp; Icon Design</li>
                            <li>Responsive Web Desgin</li>
                        </ul>                        
                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <div class="service-block service-block-default">
                        <i class="icon-custom icon-lg icon-bg-u rounded-x icon-line icon-present"></i>
                        <h2 class="heading-sm">Marketing &amp; Cunsulting</h2>
                        <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine usce dapibus elit nondapibus</p>
                        <ul class="list-unstyled">
                            <li>Analysis &amp; Consulting</li>
                            <li>Mobile Development</li>
                            <li>Email Marketing</li>
                            <li>App &amp; Icon Design</li>
                            <li>Responsive Web Desgin</li>
                        </ul>                        
                    </div>
                </div>
                <div class="col-md-4 col-sm-12">
                    <div class="service-block service-block-default">            
                        <i class="icon-custom icon-lg icon-bg-u rounded-x icon-line icon-rocket"></i>
                        <h2 class="heading-sm">SEO &amp; Advertising</h2>
                        <p>Donec id elit non mi porta gravida at eget metus id elit mi egetine. Fusce dapibus</p>
                        <ul class="list-unstyled">
                            <li>Google AdSense</li>
                            <li>Social Media</li>
                            <li>Display Advertising</li>
                            <li>App &amp; Icon Design</li>
                            <li>Analysis &amp; Consulting</li>
                        </ul>                        
                    </div>
                </div>
            </div>
        </div>

        
        <ul class="list-unstyled row portfolio-box-v1">
            <li class="col-sm-4">
                <img class="img-responsive" src="__UNIFYONE__/img/mockup/img1.jpg" alt="">
                <div class="portfolio-box-v1-in">
                    <h3>Collective Package</h3>
                    <p>Web Design, Mock-up</p>
                    <a class="btn-u btn-u-sm btn-brd btn-brd-hover btn-u-light" href="#">Read More</a>
                </div>
            </li>
            <li class="col-sm-4">
                <img class="img-responsive" src="__UNIFYONE__/img/mockup/img2.jpg" alt="">
                <div class="portfolio-box-v1-in">
                    <h3>Ahola Company</h3>
                    <p>Brand Design, UI</p>
                    <a class="btn-u btn-u-sm btn-brd btn-brd-hover btn-u-light" href="#">Read More</a>
                </div>
            </li>
            <li class="col-sm-4">
                <img class="img-responsive" src="__UNIFYONE__/img/mockup/img4.jpg" alt="">
                <div class="portfolio-box-v1-in">
                    <h3>Allan Project</h3>
                    <p>Web Development, HTML5</p>
                    <a class="btn-u btn-u-sm btn-brd btn-brd-hover btn-u-light" href="#">Read More</a>
                </div>
            </li>
        </ul>
        
        <div class="call-action-v1">
            <div class="container">
                <div class="call-action-v1-box">
                    <div class="call-action-v1-in">
                        <p>CRU云起 creative technology company providing key digital services and focused on helping our clients to build a successful business on web and mobile.</p>
                    </div>
                    <div class="call-action-v1-in inner-btn page-scroll">
                        <a href="#portfolio" class="btn-u btn-brd btn-brd-hover btn-u-dark btn-u-block">View Our Portfolio</a>
                    </div>
                </div>
            </div>
        </div>                    
    </section>
    <!-- End Services Section -->

    <!-- News Section -->
    <section id="news" class="news-section">
        <div class="container content-lg">
            <div class="title-v1">
                <h2>Latest News</h2>
                <p>We do <strong>things</strong> differently company providing key digital services. <br> 
                Focused on helping our clients to build a <strong>successful</strong> business on web and mobile.</p>             
            </div>

            <div class="row news-v1">
                <div class="col-md-4 md-margin-bottom-40">
                    <div class="news-v1-in">
                        <img class="img-responsive" src="__UNIFYONE__/img/contents/img1.jpg" alt="">
                        <h3><a href="#">Focused on helping our clients to build a successful business</a></h3>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                        <ul class="list-inline news-v1-info">
                            <li><span>By</span> <a href="#">Kathy Reyes</a></li>
                            <li>|</li>
                            <li><i class="fa fa-clock-o"></i> July 02, 2014</li>
                            <li class="pull-right"><a href="#"><i class="fa fa-comments-o"></i> 14</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4 md-margin-bottom-40">
                    <div class="news-v1-in">
                        <img class="img-responsive" src="__UNIFYONE__/img/contents/img4.jpg" alt="">
                        <h3><a href="#">We build your website to realise your vision and best product</a></h3>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                        <ul class="list-inline news-v1-info">
                            <li><span>By</span> <a href="#">John Clarck</a></li>
                            <li>|</li>
                            <li><i class="fa fa-clock-o"></i> July 02, 2014</li>
                            <li class="pull-right"><a href="#"><i class="fa fa-comments-o"></i> 07</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="news-v1-in">
                        <img class="img-responsive" src="__UNIFYONE__/img/contents/img3.jpg" alt="">
                        <h3><a href="#">Focused on helping our clients to build a successful business</a></h3>
                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>
                        <ul class="list-inline news-v1-info">
                            <li><span>By</span> <a href="#">Tina Kruiger</a></li>
                            <li>|</li>
                            <li><i class="fa fa-clock-o"></i> July 02, 2014</li>
                            <li class="pull-right"><a href="#"><i class="fa fa-comments-o"></i> 22</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
       
        <div class="parallax-twitter parallaxBg">
            <div class="container parallax-twitter-in">
                <div class="margin-bottom-30">
                    <i class="icon-custom rounded-x icon-bg-blue fa fa-twitter"></i>
                </div>

                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <ul class="list-unstyled owl-twitter-v1">
                            <li class="item">
                                <p>CRU云起 has reached 10000 plus sales and we just want to thank you to our all customers for being part of the CRU云起 Template success <a href="http://bit.ly/1c0UN3Y">http://bit.ly/1c0UN3Y</a><p>
                                <span>3 min ago via <a href="https://twitter.com/htmlstream">@htmlstream</a></span>
                            </li>
                            <li class="item">
                                <p><a href="#">@htmlstream</a> jQuery lightGallery - Lightweight jQuery lightbox gallery for displaying image and video gallery <a href="#">http://sachinchoolur.github.io/lightGallery</a> <a href="#">#javascript</a></p>
                                <span>10 min ago Retweeted by <a href="https://twitter.com/htmlstream">@twbootstrap</a></span>
                            </li>
                            <li class="item">
                                <p>New 100% Free Stock Photos. Every. Single. Day. Everything you need for your creative projects. <a href="#">http://publicdomainarchive.com</a></p>
                                <span>30 min ago via <a href="https://twitter.com/htmlstream">@wrapbootstrap</a></span>
                            </li>
                        </ul>                    
                    </div>
                </div>
            </div>
        </div> 
    </section>
    <!-- End News Section -->

    <!-- Portfolio Section -->
    <section id="portfolio" class="about-section">
        <div class="container content-lg">
            <div class="title-v1">
                <h2>Our Portfolio</h2>
                <p>We do <strong>things</strong> differently company providing key digital services. <br> 
                Focused on helping our clients to build a <strong>successful</strong> business on web and mobile.</p>                
            </div>


            <div class="cube-portfolio">
                <div id="filters-container" class="cbp-l-filters-button">
                    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item"> All </div>
                    <div data-filter=".print" class="cbp-filter-item"> Print </div>
                    <div data-filter=".web-design" class="cbp-filter-item"> Web Design </div>
                    <div data-filter=".motion" class="cbp-filter-item"> Motion </div>
                </div><!--/end Filters Container-->

                <div id="grid-container" class="cbp-l-grid-gallery">
                    <div class="cbp-item print motion">
                        <a href="__UNIFYONE__/ajax/project1.html" class="cbp-caption cbp-singlePageInline"
                           data-title="World Clock Widget<br>by Paul Flavius Nechita">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/1.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">World Clock Widget</div>
                                        <div class="cbp-l-caption-desc">by Paul Flavius Nechita</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item web-design">
                        <a href="__UNIFYONE__/ajax/project2.html" class="cbp-caption cbp-singlePageInline"
                           data-title="Bolt UI<br>by Tiberiu Neamu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/2.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Bolt UI</div>
                                        <div class="cbp-l-caption-desc">by Tiberiu Neamu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item print motion">
                        <a href="__UNIFYONE__/ajax/project3.html" class="cbp-caption cbp-singlePageInline"
                           data-title="WhereTO App<br>by Tiberiu Neamu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/3.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">WhereTO App</div>
                                        <div class="cbp-l-caption-desc">by Tiberiu Neamu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item web-design print">
                        <a href="__UNIFYONE__/ajax/project4.html" class="cbp-caption cbp-singlePageInline"
                           data-title="iDevices<br>by Tiberiu Neamu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/11.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">iDevices</div>
                                        <div class="cbp-l-caption-desc">by Tiberiu Neamu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item motion">
                        <a href="__UNIFYONE__/ajax/project5.html" class="cbp-caption cbp-singlePageInline"
                           data-title="Seemple* Music for iPad<br>by Tiberiu Neamu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/5.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Seemple* Music for iPad</div>
                                        <div class="cbp-l-caption-desc">by Tiberiu Neamu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item print motion">
                        <a href="__UNIFYONE__/ajax/project6.html" class="cbp-caption cbp-singlePageInline"
                           data-title="Remind~Me Widget<br>by Tiberiu Neamu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/6.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Remind~Me Widget</div>
                                        <div class="cbp-l-caption-desc">by Tiberiu Neamu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item web-design print">
                        <a href="__UNIFYONE__/ajax/project7.html" class="cbp-caption cbp-singlePageInline"
                           data-title="Workout Buddy<br>by Tiberiu Neamu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/7.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Workout Buddy</div>
                                        <div class="cbp-l-caption-desc">by Tiberiu Neamu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item print">
                        <a href="__UNIFYONE__/ajax/project8.html" class="cbp-caption cbp-singlePageInline"
                           data-title="Digital Menu<br>by Cosmin Capitanu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/8.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Digital Menu</div>
                                        <div class="cbp-l-caption-desc">by Cosmin Capitanu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="cbp-item motion">
                        <a href="__UNIFYONE__/ajax/project9.html" class="cbp-caption cbp-singlePageInline"
                           data-title="Holiday Selector<br>by Cosmin Capitanu">
                            <div class="cbp-caption-defaultWrap">
                                <img src="__UNIFYONE__/img/portfolio/4.jpg" alt="">
                            </div>
                            <div class="cbp-caption-activeWrap">
                                <div class="cbp-l-caption-alignLeft">
                                    <div class="cbp-l-caption-body">
                                        <div class="cbp-l-caption-title">Holiday Selector</div>
                                        <div class="cbp-l-caption-desc">by Cosmin Capitanu</div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="cbp-l-loadMore-button">
                    <a href="__UNIFYONE__/ajax/loadMore.html" class="cbp-l-loadMore-button-link">LOAD MORE</a>
                </div>
            </div>
        </div>

        <div class="clients-section parallaxBg">
            <div class="container">
                <div class="title-v1">
                    <h2>Our Clients</h2>
                </div>            
                <ul class="owl-clients-v2">
                    <li class="item"><a href="#"><img src="__UNIFYONE__/img/clients/national-geographic.png" alt=""></a></li>
                    <li class="item"><a href="#"><img src="__UNIFYONE__/img/clients/inspiring.png" alt=""></a></li>
                    <li class="item"><a href="#"><img src="__UNIFYONE__/img/clients/fred-perry.png" alt=""></a></li>
                    <li class="item"><a href="#"><img src="__UNIFYONE__/img/clients/emirates.png" alt=""></a></li>
                    <li class="item"><a href="#"><img src="__UNIFYONE__/img/clients/baderbrau.png" alt=""></a></li>
                    <li class="item"><a href="#"><img src="__UNIFYONE__/img/clients/inspiring.png" alt=""></a></li>
                </ul>            
            </div>
        </div>

        <div class="testimonials-v3">
            <div class="container">
                <div class="row">
                    <div class="col-md-8 col-md-offset-2">
                        <ul class="list-unstyled owl-ts-v1">
                            <li class="item">
                                <img class="rounded-x img-bordered" src="__UNIFYONE__/img/team/img3-sm.jpg" alt="">
                                <div class="testimonials-v3-title">
                                    <p>David Case</p>
                                    <span>Web Developer, Google</span>
                                </div>
                                <p>I just wanted to tell you how much I like to use CRU云起 - <strong>it's so sleek and elegant!</strong> <br>
                                The customisation options you implemented are countless, and I feel sorry I can't use them all. Good job, and keep going!<p>
                            </li>
                            <li class="item">
                                <img class="rounded-x img-bordered" src="__UNIFYONE__/img/team/img2-sm.jpg" alt="">
                                <div class="testimonials-v3-title">
                                    <p>Tina Krueger</p>
                                    <span>UI Designer, Apple</span>
                                </div>                                
                                <p>Keep up the great work. Your template is by far the best on the market in terms of features, quality and value or money.</p>
                            </li>
                            <li class="item">
                                <img class="rounded-x img-bordered" src="__UNIFYONE__/img/team/img1-sm.jpg" alt="">
                                <div class="testimonials-v3-title">
                                    <p>John Clarck</p>
                                    <span>Marketing &amp; Cunsulting, IBM</span>
                                </div>
                                <p>So far I really like the theme. I am looking forward to exploring more of your themes. Thank you!</p>
                            </li>
                        </ul>
                    </div>                    
                </div>
            </div>
        </div>                 
    </section>
    <!-- End Portfolio Section -->

    <!-- Contact Section -->
    <section id="contact" class="contacts-section">
        <div class="container content-lg">
            <div class="title-v1">
                <h2>Contact Us</h2>
                <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
                It has been the industry's standard dummy text.</p>
            </div>

            <div class="row contacts-in">
                <div class="col-md-6 md-margin-bottom-40">
                    <ul class="list-unstyled">
                        <li><i class="fa fa-home"></i> 5B Streat, City 50987 New Town US</li>
                        <li><i class="fa fa-phone"></i> 1(800) 220 084</li>
                        <li><i class="fa fa-envelope"></i> <a href="info@example.com">info@example.com</a></li>
                        <li><i class="fa fa-globe"></i> <a href="http://htmlstream.com">www.htmlstream.com</a></li>
                    </ul>
                </div>

                <div class="col-md-6">
                    <form action="__UNIFYONE__/php/sky-forms-pro/demo-contacts-process.php" method="post" id="sky-form3" class="sky-form contact-style">
                        <fieldset>
                            <label>Name</label>
                            <div class="row">
                                <div class="col-md-7 margin-bottom-20 col-md-offset-0">
                                    <div>
                                        <input type="text" name="name" id="name" class="form-control">
                                    </div>
                                </div>                
                            </div>
                            
                            <label>Email <span class="color-red">*</span></label>
                            <div class="row">
                                <div class="col-md-7 margin-bottom-20 col-md-offset-0">
                                    <div>
                                        <input type="text" name="email" id="email" class="form-control">
                                    </div>
                                </div>                
                            </div>
                            
                            <label>Message</label>
                            <div class="row">
                                <div class="col-md-11 margin-bottom-20 col-md-offset-0">
                                    <div>
                                        <textarea rows="8" name="message" id="message" class="form-control"></textarea>
                                    </div>
                                </div>                
                            </div>
                            
                            <p><button type="submit" class="btn-u btn-brd btn-brd-hover btn-u-dark">Send Message</button></p>
                        </fieldset>

                        <div class="message">
                            <i class="rounded-x fa fa-check"></i>
                            <p>Your message was successfully sent!</p>
                        </div>
                    </form> 
                </div>
            </div>            
        </div>

        <div class="copyright-section">
            <p>2014 &copy; All Rights Reserved. CRU云起 Theme by <a target="_blank" href="https://twitter.com/htmlstream">Htmlstream</a></p>
            <ul class="social-icons">
                <li><a href="#" data-original-title="Facebook" class="social_facebook rounded-x"></a></li>
                <li><a href="#" data-original-title="Twitter" class="social_twitter rounded-x"></a></li>
                <li><a href="#" data-original-title="Goole Plus" class="social_googleplus rounded-x"></a></li>
                <li><a href="#" data-original-title="Pinterest" class="social_pintrest rounded-x"></a></li>
                <li><a href="#" data-original-title="Linkedin" class="social_linkedin rounded-x"></a></li>
            </ul>
            <span class="page-scroll"><a href="#intro"><i class="fa fa-angle-double-up back-to-top"></i></a></span>
        </div>
    </section>
    <!-- End Contact Section -->

    <!-- JS Global Compulsory -->
    <script type="text/javascript" src="__UNIFYONE__/plugins/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/jquery/jquery-migrate.min.js"></script>    
    <script type="text/javascript" src="__UNIFYONE__/plugins/bootstrap/js/bootstrap.min.js"></script>
    <!-- JS Implementing Plugins -->
    <script type="text/javascript" src="__UNIFYONE__/plugins/smoothScroll.js"></script>    
    <script type="text/javascript" src="__UNIFYONE__/plugins/jquery.easing.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/pace/pace.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/jquery.parallax.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/counter/waypoints.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/counter/jquery.counterup.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/owl-carousel/owl.carousel.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/sky-forms-pro/skyforms/js/jquery.form.min.js"></script>    
    <script type="text/javascript" src="__UNIFYONE__/plugins/sky-forms-pro/skyforms/js/jquery.validate.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/revolution-slider/rs-plugin/js/jquery.themepunch.tools.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/revolution-slider/rs-plugin/js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/plugins/cube-portfolio/cubeportfolio/js/jquery.cubeportfolio.min.js"></script>
    <!-- JS Page Level-->
    <script type="text/javascript" src="__UNIFYONE__/js/one.app.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/js/forms/login.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/js/forms/contact.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/js/plugins/pace-loader.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/js/plugins/owl-carousel.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/js/plugins/style-switcher.js"></script>    
    <script type="text/javascript" src="__UNIFYONE__/js/plugins/revolution-slider.js"></script>
    <script type="text/javascript" src="__UNIFYONE__/js/plugins/cube-portfolio/cube-portfolio-lightbox.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function() {
            App.init();
            App.initCounter();
            App.initParallaxBg();
            LoginForm.initLoginForm();
            ContactForm.initContactForm();
            OwlCarousel.initOwlCarousel();
            StyleSwitcher.initStyleSwitcher();            
            RevolutionSlider.initRSfullScreen();
        });
    </script>
    <!--[if lt IE 9]>
        <script src="__UNIFYONE__/plugins/respond.js"></script>
        <script src="__UNIFYONE__/plugins/html5shiv.js"></script>
        <script src="__UNIFYONE__/js/plugins/placeholder-IE-fixes.js"></script>
        <script src="__UNIFYONE__/plugins/sky-forms-pro/skyforms/js/sky-forms-ie8.js"></script>
    <![endif]-->

    <!--[if lt IE 10]>
        <script src="__UNIFYONE__/plugins/sky-forms-pro/skyforms/js/jquery.placeholder.min.js"></script>
    <![endif]-->    
</body>
</html>